<template>
  <div class="paper-home-container">
    <!-- 顶部标题区域 -->
    <div class="header-section">
      <h1 class="main-title">论文首页（宋雪玲）</h1>
      <div class="subtitle">大数据论文管理系统</div>
    </div>

    <!-- 个人信息展示区 -->
    <el-card class="user-info-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-user"></i> 个人信息</span>
      </div>
      <div class="user-info-content">
        <div class="user-avatar">
          <el-avatar :size="80" :src="userInfo.avatar"></el-avatar>
        </div>
        <div class="user-details">
          <div class="info-item">
            <span class="label">姓名：</span>
            <span class="value">{{ userInfo.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">学号：</span>
            <span class="value">{{ userInfo.studentId }}</span>
          </div>
          <div class="info-item">
            <span class="label">院系：</span>
            <span class="value">{{ userInfo.department }}</span>
          </div>
          <div class="info-item">
            <span class="label">专业：</span>
            <span class="value">{{ userInfo.major }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系方式：</span>
            <span class="value">{{ userInfo.contact }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 毕业论文信息展示区 -->
    <el-card class="thesis-info-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-document"></i> 毕业论文信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleEditThesis">编辑</el-button>
      </div>
      <div class="thesis-info-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="论文题目">{{ thesisInfo.title }}</el-descriptions-item>
          <el-descriptions-item label="论文类型">{{ thesisInfo.type }}</el-descriptions-item>
          <el-descriptions-item label="研究方向">{{ thesisInfo.researchDirection }}</el-descriptions-item>
          <el-descriptions-item label="开题时间">{{ thesisInfo.proposalDate }}</el-descriptions-item>
          <el-descriptions-item label="中期检查时间">{{ thesisInfo.midtermDate }}</el-descriptions-item>
          <el-descriptions-item label="预答辩时间">{{ thesisInfo.preDefenseDate }}</el-descriptions-item>
          <el-descriptions-item label="答辩时间">{{ thesisInfo.defenseDate }}</el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusType(thesisInfo.status)">{{ thesisInfo.status }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 论文成果介绍区 -->
    <el-card class="paper-achievements-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-trophy"></i> 论文成果介绍</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleEditAchievements">编辑</el-button>
      </div>
      <div class="achievements-content">
        <div class="achievement-section">
          <h3 class="section-title">研究背景与意义</h3>
          <p class="section-content">{{ achievements.background }}</p>
        </div>
        
        <div class="achievement-section">
          <h3 class="section-title">主要创新点</h3>
          <ul class="innovation-list">
            <li v-for="(innovation, index) in achievements.innovations" :key="index" class="innovation-item">
              {{ innovation }}
            </li>
          </ul>
        </div>
        
        <div class="achievement-section">
          <h3 class="section-title">研究成果</h3>
          <div class="research-results">
            <div v-for="(result, index) in achievements.results" :key="index" class="result-item">
              <h4>{{ result.title }}</h4>
              <p>{{ result.description }}</p>
              <el-tag size="small" :type="result.type === '期刊' ? 'success' : 'primary'">{{ result.type }}</el-tag>
            </div>
          </div>
        </div>
        
        <div class="achievement-section">
          <h3 class="section-title">应用前景</h3>
          <p class="section-content">{{ achievements.application }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PaperHomeSxl',
  data() {
    return {
      // 个人信息
      userInfo: {
        name: '宋雪玲',
        studentId: '116420220085',
        department: '工程技术学院',
        major: '数据科学与大数据技术',
        contact: '18965860650',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      // 毕业论文信息
      thesisInfo: {
        title: '大数据环境下的异常检测算法研究与应用',
        type: '应用研究',
        researchDirection: '大数据分析与智能检测',
        proposalDate: '2023-10-08',
        midtermDate: '2024-02-15',
        preDefenseDate: '2024-04-20',
        defenseDate: '2024-06-10',
        status: '进行中'
      },
      // 论文成果介绍
      achievements: {
        background: '随着大数据时代的到来，数据规模呈爆炸式增长，如何从海量数据中快速准确地识别异常模式成为了大数据分析领域的重要挑战。异常检测在网络安全、金融风控、工业生产监控等领域具有重要应用价值。本研究旨在探索适用于大规模数据环境的高效异常检测算法，并验证其在实际应用场景中的有效性。',
        innovations: [
          '提出了一种基于密度的自适应异常检测算法，能够自动调整检测阈值，适应不同数据分布',
          '设计了一种分布式异常检测框架，基于Apache Spark实现，显著提高了算法处理大规模数据的能力',
          '融合了深度学习技术，开发了一种结合CNN和LSTM的混合异常检测模型，提高了检测准确率',
          '提出了一种异常解释机制，能够为检测结果提供可解释性分析，增强了算法的实用性'
        ],
        results: [
          {
            title: '基于密度的自适应异常检测算法',
            description: '该算法在KDD Cup 99数据集上的检测准确率达到96.8%，优于传统算法15%以上。',
            type: '期刊'
          },
          {
            title: '分布式异常检测框架设计与实现',
            description: '基于Spark平台实现的分布式异常检测框架，在TB级数据集上的处理速度提升了10倍。',
            type: '会议'
          },
          {
            title: '深度学习在异常检测中的应用研究',
            description: '探索了多种深度学习模型在异常检测任务中的性能表现，并提出了改进方案。',
            type: '期刊'
          }
        ],
        application: '本研究成果可广泛应用于网络安全监控、金融欺诈检测、工业物联网异常预警等领域。在实际应用中，能够帮助企业及时发现潜在风险，降低运营成本，提高业务安全性。同时，研究成果对于推动大数据分析技术在实际业务中的落地应用具有重要意义。'
      }
    }
  },
  methods: {
    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        '已完成': 'success',
        '进行中': 'warning',
        '未开始': 'info',
        '已延期': 'danger'
      }
      return statusMap[status] || 'info'
    },
    // 编辑论文信息
    handleEditThesis() {
      this.$message({
        message: '编辑论文信息功能开发中...',
        type: 'info'
      })
    },
    // 编辑成果介绍
    handleEditAchievements() {
      this.$message({
        message: '编辑成果介绍功能开发中...',
        type: 'info'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.paper-home-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.header-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px 0;
  background: linear-gradient(135deg, #1890ff, #36cfc9);
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .main-title {
    font-size: 32px;
    margin: 0;
    font-weight: bold;
    letter-spacing: 2px;
  }

  .subtitle {
    font-size: 16px;
    margin-top: 10px;
    opacity: 0.9;
  }
}

.user-info-card {
  margin-bottom: 20px;

  .user-info-content {
    display: flex;
    align-items: center;
    padding: 20px 0;

    .user-avatar {
      margin-right: 30px;
    }

    .user-details {
      flex: 1;

      .info-item {
        display: flex;
        margin-bottom: 12px;

        .label {
          font-weight: bold;
          width: 100px;
          color: #606266;
        }

        .value {
          color: #303133;
          font-size: 14px;
        }
      }
    }
  }
}

.thesis-info-card,
.paper-achievements-card {
  margin-bottom: 20px;
}

.achievements-content {
  .achievement-section {
    margin-bottom: 25px;

    .section-title {
      font-size: 18px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 2px solid #1890ff;
    }

    .section-content {
      line-height: 1.8;
      color: #606266;
      font-size: 14px;
      text-align: justify;
    }

    .innovation-list {
      padding-left: 20px;

      .innovation-item {
        margin-bottom: 10px;
        line-height: 1.6;
        color: #606266;
        font-size: 14px;
      }
    }

    .research-results {
      .result-item {
        background-color: #fafafa;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 15px;
        border-left: 4px solid #1890ff;

        h4 {
          margin-top: 0;
          margin-bottom: 8px;
          color: #303133;
          font-size: 16px;
        }

        p {
          margin-bottom: 10px;
          color: #606266;
          font-size: 14px;
          line-height: 1.6;
        }
      }
    }
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
}
</style>